<template>
  <div class='update'>
    <Welcome :meta='this.category'/>
    <div class='article-list'>
      <div class='items-area'>
        <div v-for='(v,index) in articles' :key='index'>
          <ArticleItem :article='v'/>
        </div>
      </div>
      <div class='home-side'>
        <div class='relate'>
          <h3 class='side-title'>相关文章</h3>
          <div class='side-wrapper'>
            <ul class='list-row'>
              <div v-for='(v,index) in related' :key='index'>
                <RelatedArticleItem :meta='v'/>
              </div>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ArticleItem from '~/components/ArticleItem'
import Welcome from '~/components/Welcome'
import RelatedArticleItem from '~/components/RelatedArticleItem'
export default {
  components: { RelatedArticleItem, Welcome, ArticleItem },
  data(){
    return {
      articles: [],
      related :[],
      category:{}
    }
  },
  async created() {
    await this.getCategory()
    await this.getAllRelatedArticles()
  },
  methods:{
    async getCategory(path){
      let res = await this.$axios.$get(`/category?path=${path}`)
      this.category = res.data.category
      this.articles = res.data.articles
      console.log(this.category)
    },
    async getAllRelatedArticles(){
      let res = await this.$axios.$get("/article")
      this.related = res.data
    }
  }
}
</script>
<style scoped>
.update{
  padding: 0 0 10px;
  margin-top: 5px;
}
.article-list{
  width: 1200px;
  margin: 0 auto;
}
.home-side{
  width: 300px;
  float: right;
}
.relate{
  padding: 0;
  margin-bottom: 10px;
  position: relative;
}
.side-title{
  background: #447EB9;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}
.side-wrapper{
  background: #fff;
  padding: 0 10px 0;
}
.list-row{
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  list-style: none;
}
.items-area{
  background-color: #F3F3F3;
  width: 890px;
  float: left;
}

</style>
